<script setup lang="ts">
import PrimaryIcon from '~icons/icons/primary-tip.svg'
import WarningIcon from '~icons/icons/warning.svg'

interface IProps {
  type?: 'primary' | 'warning'
  text?: string
}

const props = withDefaults(defineProps<IProps>(), {
  type: 'primary',
})

const map = {
  primary: {
    bg: '#E8FFF1',
    color: '#00A65B',
    icon: h(PrimaryIcon),
  },
  warning: {
    bg: '#FEF2E6',
    color: '#FF6805',
    icon: h(WarningIcon),
  },
}

const config = computed(() => {
  return map[props.type]
})
</script>

<template>
  <div class="res-tips-bar">
    <component :is="config.icon" />
    <section>
      <slot />
      <div class="tips-text">
        {{ text }}
      </div>
    </section>
  </div>
</template>

<style scoped lang="less">
.res-tips-bar {
  @apply text-[#454954] py-2 px-4 rounded flex items-center gap-x-2;
  background-color: v-bind('config.bg');
  border-radius: 8px;

  .tips-text {
    @apply text-xs;
  }

  svg {
    color: v-bind('config.color') !important;
    fill: currentColor !important;
  }
}
</style>
